<template>
  <!-- 头部 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>订单管理</el-breadcrumb-item>
    <el-breadcrumb-item>订单列表</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 卡片 -->
  <el-card class="box-card">
    <div class="py-4">
      <el-table :data="Data"
                border
                style="width: 100%">
        <el-table-column type="index"
                         label="#" />
        <el-table-column prop="name"
                         label="订单编号" />
        <el-table-column prop="price"
                         label="订单价格" />
        <el-table-column prop="payment"
                         label="是否付款">
          <template #default="id">
            <el-tag size="large"
                    v-if="id.row.payment == 0"
                    type="danger">未付款</el-tag>
            <el-tag size="large"
                    v-else
                    type="">已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ship"
                         label="是否发货">
          <template #default="id">
            <el-tag size="large"
                    v-if="id.row.ship == 0"
                    type="danger">未发货</el-tag>
            <el-tag size="large"
                    v-else
                    type="">已发货</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="time"
                         label="下单时间" />
        <el-table-column prop="id"
                         label="操作"
                         width="175px">
          <template #default="id">
            <el-button type="success"
                       disabled
                       v-if="id.row.ship == 1"
                       size="large">发货</el-button>
            <el-button type="success"
                       v-else
                       size="large"
                       @click="ship(id.row.id)">发货</el-button>
            <el-button type="primary"
                       size="large">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </el-card>
</template>

<script>
import { ref } from 'vue'
import OrderList from '@/hooks/OrderList.js'
import { ArrowRight } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'List',
  setup () {
    const Data = ref(OrderList)
    const ship = (value) => {
      ElMessageBox.confirm(
        '确定是否发货?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        for (let key in Data.value) {
          if (value === Data.value[key].id) {
            console.log(Data.value[key].payment)
            if (Data.value[key].payment == 0) {
              ElMessage({
                type: 'error',
                message: '用户未付款!',
                duration: 800
              })
            } else {
              Data.value[key].ship = 1
              ElMessage({
                type: 'success',
                message: '发货成功!',
                duration: 800
              })
            }
          }
        }
      }).catch(() => {
        ElMessage({
          type: 'info',
          message: '已取消发货!',
          duration: 800
        })
      })
    }
    return {
      ArrowRight,
      Data,
      ship
    }
  }
}
</script>

<style lang="less" scoped>
.box-card {
  width: 100%;
  margin-top: 20px;
}
</style>